<template>
  <div class="recommend">
    <recommend-swiper
      :swiper="swiperList"
      :swiperImg="swiperImg"
    ></recommend-swiper>
    <div class="recommend-body">
      <div class="left">
        <!-- 分类推荐 -->
        <hot-recommend :recommendSongList="recommendSongList"></hot-recommend>
        <!-- 新歌上架 -->
        <main-table class="table-first">
          <a href="javascript:;" slot="left">新碟上架</a>
          <div class="main-more" slot="right">
            <a href="javascript:;" class="more-a" @click="toAlbum">更多</a>
            <span class="hot-right"></span>
          </div>
          <new-album slot="body" :newAlbumList="newAlbumList"></new-album>
        </main-table>
        <!-- 榜单 -->
        <recommend-top :recommendTop="recommendTop"> </recommend-top>
      </div>
      <div class="right">
        <recommend-login></recommend-login>
        <hotsinger :hotSingerList="hotSingerList"></hotsinger>
        <hotanchor :hotanchor="hotanchor"></hotanchor>
      </div>
    </div>
    <main-footer></main-footer>
  </div>
</template>

<script>
import {
  getSwiper,
  getRecommendSongList,
  getNewAlbum,
  getTopList,
  getrecommendTop,
  getHotSinger,
  getHotAnchor
} from '@/api/api.js'
import RecommendSwiper from './components/RecommendSwiper.vue'
import RecommendLogin from './components/RecommendLogin.vue'
import HotRecommend from './components/HotRecommend.vue'
import MainTable from '../../components/common/mainTable.vue'
import NewAlbum from './components/newAlbum.vue'
import RecommendTop from './components/recommendTop.vue'
import Hotsinger from './components/hotsinger.vue'
import Hotanchor from './components/hotanchor.vue'
import MainFooter from '../../components/common/mainFooter.vue'

export default {
  components: {
    RecommendSwiper,
    RecommendLogin,
    HotRecommend,
    MainTable,
    NewAlbum,
    RecommendTop,
    Hotsinger,
    Hotanchor,
    MainFooter
  },
  data() {
    return {
      // 轮播列表
      swiperList: [],
      // 轮播图片
      swiperImg: [],
      // 推荐歌单
      recommendSongList: [],
      // 新歌上架
      newAlbumList: [],
      // 推荐排行榜3个id
      recommendTopId: [],
      // 推荐排行榜
      recommendTop: [],
      // 热门歌手
      hotSingerList: [],
      // 热门主播
      hotanchor: []
    }
  },
  created() {
    this.getSwiper()
    this.getRecommendSongList()
    this.getNewAlbum()
    this.getTopList()
    this.getHotSinger()
    this.getHotAnchor()
  },
  methods: {
    async getSwiper() {
      const res = await getSwiper()

      this.swiperList = res.banners
      console.log(this.swiperList)
      // 获取轮播图片
      for (let item of this.swiperList) {
        this.swiperImg.push(item.imageUrl)
      }
      this.$store.dispatch('savaSwiperImg', this.swiperImg)
      console.log(this.swiperImg)
      window.localStorage.setItem('swiperImg', JSON.stringify(this.swiperImg))
    },
    // 获取推荐歌单
    async getRecommendSongList() {
      const res = await getRecommendSongList(8)
      console.log(res)
      this.recommendSongList = res.result
      for (let recommendSongListImg of this.recommendSongList) {
        recommendSongListImg.picUrl += '?param=140y140'
      }
    },
    // 新歌上架
    getNewAlbum() {
      // const { monthData: res } = await getNewAlbum(10);
      // const res  = await getNewAlbum(10);
      getNewAlbum(10).then((res) => {
        console.log(res)
        this.newAlbumList = res.weekData.slice(0, 10)
        for (let newAlbumListImg of this.newAlbumList) {
          newAlbumListImg.blurPicUrl += '?param=118y118'
        }
        console.log(this.newAlbumList)
      })
    },
    // 得到3大排行榜id
    async getTopList() {
      const { list: res } = await getTopList()
      let list = res.slice(0, 3)
      for (let item of list) {
        this.recommendTopId.push(item.id)
      }
      console.log(this.recommendTopId)
      this.getrecommendTop()
    },
    // 根据id获取排行榜
    async getrecommendTop() {
      for (let item of this.recommendTopId) {
        const { playlist: res } = await getrecommendTop(item)
        res.coverImgUrl += '?param=80y80'
        this.recommendTop.push(res)
      }
      // this.recommendTop = arr
      console.log(this.recommendTop)
      // function RecommendTop() {
      //   this.name = arr.name,
      //   this.coverImgUrl = arr.
      // }
    },
    // 热门歌手
    async getHotSinger() {
      const res = await getHotSinger()
      this.hotSingerList = res.list.artists.slice(0, 5)
      for (let hotSingerListImg of this.hotSingerList) {
        hotSingerListImg.img1v1Url += '?param=62y62'
      }
      // console.log(res);
      console.log(this.hotSingerList)
    },
    async getHotAnchor() {
      const { data: res } = await getHotAnchor(5)

      this.hotanchor = res.list
      for (let hotanchorImg of this.hotanchor) {
        hotanchorImg.avatarUrl += '?param=40y40'
      }
      console.log(this.hotanchor)
    },
    toAlbum() {
      this.$router.push({ path: '/discover/album' })
    }
  }
}
</script>

<style lang="scss" scoped>
.recommend {
  .recommend-body {
    width: 1100px;
    // height: 1000px;

    margin: auto;
    display: flex;
    justify-content: center;
    .left {
      border: 1px solid #d3d3d3;
      border-width: 0 1px;
      padding: 20px 20px 40px;
      width: 730px;
      background: #fff;
      .table-first {
        margin-top: 50px;

        a {
          font-size: 20px;
          margin-bottom: 5px;
        }
        .new-album {
          margin-top: 20px;
        }
      }
    }
    .right {
      background: #fff;
      width: 255px;
      border-right: 1px solid #d3d3d3;
    }
  }
}
.main-more .more-a {
  font-size: 14px !important;
}
</style>
